<template>
  <div class="page-container">
    <div class="control-container">
      <div class="right-panel">
        <el-row>
          <el-col :span="11">
            <div class="search-panel">
              <el-form ref="queryForm" size="mini" label-width="100px" :model="query" :inline="true">
                <el-form-item label="关键字">
                  <el-input v-model="query.keyword" placeholder="输入名称或者描述" maxlength="255" />
                </el-form-item>
                <el-button size="mini" type="primary" @click="handleQuery">查询</el-button>
                <el-button size="mini" type="primary" @click="handleAdd">新增字典</el-button>
                <el-button size="mini" icon="el-icon-refresh" @click="flushPage">刷新</el-button>
              </el-form>
            </div>
            <div class="table-panel">
              <el-table
                v-loading="tableLoading"
                size="mini"
                :data="tableData"
                class="grid-data-table"
                height="calc(100vh - 400px)"
                @row-click="handleQueryDesc"
              >
                <el-table-column type="index" width="45" />
                <el-table-column prop="codeType" label="码类型" show-overflow-tooltip />
                <el-table-column prop="codeTypeName" label="码类型名称" show-overflow-tooltip />
                <!-- <el-table-column label="操作" width="150">
                  <template slot-scope="scope">
                    <el-button class="table-inner-btn" type="text" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
                    <el-button class="table-inner-btn" type="text" size="mini" @click="handleDel(scope.row)">删除</el-button>
                  </template>
                </el-table-column> -->
              </el-table>
              <div class="pagination-container">
                <Pagination
                  v-show="query.total>0"
                  :total="query.total"
                  :page.sync="query.page"
                  :limit.sync="query.limit"
                  @pagination="initData"
                />
              </div>
            </div>
          </el-col>
          <el-col :span="13">
            <div class="search-panel">
              <el-button :disabled="clickObj.codeType == null || clickObj.codeType == ''" type="primary" @click="handleDetailAdd">新增明细</el-button>
            </div>
            <div class="table-panel">
              <el-table
                v-loading="descTableLoading"
                size="small"
                :data="tableDescData"
              >
                <el-table-column prop="codeName" label="码名称" show-overflow-tooltip />
                <el-table-column prop="code" label="码" show-overflow-tooltip />
                <el-table-column prop="sorting" label="排序" show-overflow-tooltip />
                <el-table-column label="操作" width="150">
                  <template slot-scope="scope">
                    <el-button class="table-inner-btn" type="text" size="mini" @click="handleDetailUpdate(scope.row)">编辑</el-button>
                    <el-button class="table-inner-btn" type="text" size="mini" @click="handleDel(scope.row)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <AddDictFormDialog
      :obj="dictObj"
      :dialog-visible="formDialogVisible"
      :dialog-type="dialogType"
      @closeDialog="closeDialog"
      @flushPage="flushPage"
    />
    <AddDictDetailFormDialog
      :obj="dictObj"
      :dialog-visible="formDetailDialogVisible"
      :dialog-type="dialogType"
      @closeDialog="closeDialog"
      @flushPage="flushDetailPage"
    />
  </div>
</template>

<script>
import AddDictFormDialog from './components/AddDictFormDialog'
import AddDictDetailFormDialog from './components/AddDictDetailFormDialog'
import Pagination from '@/components/Pagination'
import { getlistLevel, del, getDicts } from '@/api/system/dict'
export default {
  name: 'SystemDictPage',
  components: {
    AddDictFormDialog,
    AddDictDetailFormDialog,
    Pagination
  },
  data() {
    return {
      dictObj: null,
      dialogType: 'detail',
      formDialogVisible: false,
      formDetailDialogVisible: false,
      tableLoading: false,
      descTableLoading: false,
      clickObj: { codeType: '', codeTypeName: '' },
      query: {
        page: 1, limit: 10, total: 0, keyword: ''
      },
      tableData: [],
      tableDescData: []
    }
  },
  created() {
    this.initData()
  },
  methods: {
    // 查询明细
    handleQueryDesc(row) {
      const query = {
        codeType: row.codeType
      }
      this.clickObj = row
      this.descTableLoading = true
      getDicts(query).then(result => {
        this.descTableLoading = false
        this.tableDescData = result.data.list
      }).catch(() => {
        this.descTableLoading = false
      })
    },
    initData() {
      const query = JSON.parse(JSON.stringify(this.query))
      this.tableLoading = true
      getlistLevel(query).then(result => {
        this.tableLoading = false
        this.query.total = result.data.total
        this.tableData = result.data.list
      }).catch(() => {
        this.tableLoading = false
      })
    },
    handleAdd() {
      this.dictObj = null
      this.dialogType = 'add'
      this.formDialogVisible = true
    },
    handleDetailAdd() {
      this.dictObj = this.clickObj
      this.dialogType = 'add'
      this.formDetailDialogVisible = true
    },
    handleUpdate(row) {
      this.dictObj = row
      this.dialogType = 'update'
      this.formDialogVisible = true
    },
    handleDetailUpdate(row) {
      this.dictObj = row
      this.dialogType = 'update'
      this.formDetailDialogVisible = true
    },
    handleDel(row) {
      this.$confirm('确认删除此数据?', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        del(row.id).then(result => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.handleQuery()
          this.handleQueryDesc(this.clickObj)
        }).catch(() => {
        })
      }).catch(() => {
      })
    },
    handleDetail(row) {
      this.dict = row
      this.dialogType = 'detail'
      this.formDialogVisible = true
    },
    closeDialog() {
      this.formDialogVisible = false
      this.formDetailDialogVisible = false
    },
    flushPage() {
      this.clearQuery()
      this.initData()
    },
    flushDetailPage() {
      this.handleQueryDesc(this.clickObj)
    },
    clearQuery() {
      this.query = {
        page: 1, limit: 10, total: 0, keyword: ''
      }
    },
    handleQuery() {
      this.initData()
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
